<template>
  <div class="login page" :style="{'--background-image':`url(${bgImage})`}">
    <div class="functional_panel">
      <div class="link_panel">
        <router-link :to="{path:'/login',redirectedFrom}">登录</router-link>
        <router-link :to="{path:'/register',redirectedFrom}">注册</router-link>
      </div>
      <router-view v-slot="{ Component, route }">
        <transition name="slide-fade" mode="out-in" duration="500">
          <component :is="Component"/>
        </transition>
      </router-view>
    </div>
    <div class="image"/>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";
import InputBox from "../components/InputBox.vue";
import SubmitButton from "../components/SubmitButton.vue";

export default {
  components: {SubmitButton, InputBox},
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (to?.redirectedFrom?.path != null)
        vm.redirectedFrom = to.redirectedFrom.path
    })
  }, setup() {
    const data = reactive({
      redirectedFrom: '',
      bgImage: '/webp_よろしく令和！_74502133.webp'
    })
    return {...toRefs(data)}
  }
}
</script>

<style scoped lang="less">
.login {
  display: flex;
  --animation-duration: 30s;
  --background-image: url('/webp_よろしく令和！_74502133.webp');

  & .functional_panel {
    width: 40%;
    padding: 64px;
    min-width: 350px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: var(--background-image);
    animation: bg-size var(--animation-duration) infinite alternate;
    gap: 20px;

    & .link_panel {
      display: flex;
      gap: 30px;
      height: 50px;
      font-weight: 900;
      font-size: 24px;

      & > a {
        color: #dbdbdb;
        transform: scale(1);
        transition: all .3s ease;
      }

      & a.router-link-exact-active {
        color: white;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
        transform: scale(1.5);
      }
    }

    & > div {
      z-index: +1;
    }

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backdrop-filter: blur(50px);
      backdrop-filter: blur(50px);
    }
  }

  & .image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 20% 20%;
    background-repeat: no-repeat;
    background-image: var(--background-image);
    animation: bg-size var(--animation-duration) infinite alternate;
  }

  @keyframes bg-size {
    from {
      background-position: 20% 20%;
    }
    to {
      background-position: 40% 40%;
    }
  }
}
</style>